<template>
	<div>
		 <title-header :title="topTitle"></title-header>
		<tab class="tab">
			<tab-item disabled></tab-item>
			<tab-item selected @on-item-click="onItemClick">商品</tab-item>
			<tab-item @on-item-click="onItemClick">
				<a href="#comments">评论</a>
			</tab-item>
			<tab-item @on-item-click="onItemClick">
				<a href="#detail">详情</a>
			</tab-item>
			<tab-item disabled></tab-item>
		</tab>
		<div >
			<swiper heights='24' :swiperList='goodDetail.swiperList' ref='swiper' :direction='direction'></swiper>
			<section>
				<div class="content">
					<p class="goodName">
						<a class="shopName">{{goodDetail.shopName}}</a>{{goodDetail.goodName}}</p>
					<p class="tip">{{goodDetail.goodTip}}</p>
					<p class="lastP">
						<a class="money">￥{{goodDetail.goodPrice}}</a>
						<s>￥{{goodDetail.goodOldPrice}}</s>
						<span class="positionRight">重量 {{goodDetail.goodWeight}}</span>
					</p>
				</div>
				<div class="cell" @click="showPopup()">
					<span v-if="chooseProduct()">请选择规格</span>
					<span v-else>已选择 {{product.toString().replace(/,/g, " ")}}</span>
					<x-icon type="ios-arrow-right" class="icon" size="30"></x-icon>
				</div>
				<div class="title" id="comments"><img src="../../../static/img/message.png" height='0.9rem' /> 评价</div>
				<div class="cell" @click=" turnToComments">
					<span >宝贝评价(39)</span>
				</div>

				<div class="title" id="detail"><img src="../../../static/img/message.png" height='0.9rem' /> 商品详情</div>
				<ul class="detail">
					<li><img src="../../../static/1.jpg" /></li>
					<li><img src="../../../static/img/logo.jpg"/></li>
					<li><img src="../../../static/1.jpg"/></li>
					<li><img src="../../../static/img/logo.jpg"/></li>
				</ul>
				<toast v-model="showToast" width='12rem' type="text" :time="1200" is-show-mask text="添加成功, 在购物车等亲" :position='positions'></toast>
			</section>
			<footer>
				<div>
					<ul class="footer">
						<li class="classOne">
							<span class="iconfont icon-message_light"></span>
							<h4>客服</h4>
						</li>
						<li class="classOne">
							<span class="iconfont icon-liwu"></span>
							<h4>收藏</h4>
						</li>
						<li class="classTwo" @click="showPopup('','tip')">加入购物车</li>
						<li class="classTwo" @click="showPopup('/fillorder','')">立即购买</li>
					</ul>
				</div>
			</footer>

			<div>
				<popup ref="showChoose"></popup>
			</div>

			<goodList ref='goodList'></goodList>
		</div>

	</div>

</template>
<script>
	import TitleHeader from '@/components/titleHeader.vue'
	import Popup from '@/components/popup.vue'
	import Swiper from '@/components/swiper.vue'
	import GoodList from '@/components/goodList.vue'
	import NotFound from '@/page/nothingFound/notFound.vue'
	import Data from '@/server/server.js'
	
	import {
		Cell,
		Group,
		TransferDom,
		XButton,
		InlineXNumber,
		Tab,
		TabItem,
		Toast,
		
	} from 'vux'

	export default {
		directives: {
			TransferDom
		},
		components: {
			Swiper,
			Cell,
			Group,
			Popup,
			XButton,
			InlineXNumber,
			Tab,
			TabItem,
			GoodList,
			NotFound,
			Toast,
			TitleHeader
		},
		data() {
			return {
				goodDetail: [],
				topTitle: '商品详情',
				direction: 'center',
				title:
					(this.$store.state.color || this.$store.state.size ?
						'已选择 ' :
						'请选择 ') +
					this.$store.state.color +
					' ' +
					this.$store.state.size,
				showToast: false,
				positions: 'middle',
				product: [],
				specLength: ''
			}
		},
		computed: {
			goodDetails() {
				Data.goodDetail.then(data => {
					this.goodDetail = data
				})
			}
		},
		methods: {
			showPopup(path = '', tip = '') {
				let num = 0
				this.$store.state.products.forEach(value => {
					if(value != '' && value != undefined) {
						num++
					}
				})
				if(num === this.specLength && path) {
					this.$router.push(path)
					return
				}
				this.$refs.showChoose.isShow = !this.$refs.showChoose.isShow
				this.$refs.showChoose.route = path
			},
			onItemClick(index) {
				//    this.showItem = index
			},
			showPosition(position) {
				this.positions = position
				this.showToast = true
			},
			init() {
				this.$refs.swiper.init()
			},
			chooseProduct() {
				let num = 0
				this.$store.state.products.forEach(value => {
					if(value != '' && value != undefined) {
						num++
					}
				})
				return num < this.specLength
			},
			turnToComments (){
				this.$router.push('/comments')
			}
			
		},
		mounted() {
			this.init()
			this.product = this.$store.state.products.toString().replace(/,/g, ' ')
			Data.specification.then(data => {
				this.specLength = data.specLength
				this.$refs.goodList.bindSticky()
			})
			

			
		},
		watch: {
			goodDetails() {},
			product() {
				this.product = this.$store.state.products.toString().replace(/,/g, ' ')
			}
		}
	}
</script>
<style scoped>
	section {
		margin-bottom: 3rem;
	}
	
	.popup {
		overflow: inherit;
	}
	
	.content {
		padding: 0.5rem;
	}
	
	.content .goodName {
		font-size: 1rem;
		word-break: break-all;
	}
	
	.content .goodName a {
		background: red;
		color: white;
		margin-right: 1rem;
		padding: 0 0.5rem;
	}
	
	.content .tip {
		font-size: 0.8rem;
		color: red;
	}
	
	.lastP {
		position: relative;
	}
	
	.lastP .money {
		color: red;
		font-size: 1.2rem;
	}
	
	.moneys {
		color: red;
		font-size: 1.2rem;
	}
	
	.lastP s {
		opacity: 0.6;
		font-size: 0.8rem;
	}
	
	.positionRight {
		position: absolute;
		right: 5%;
		opacity: 0.6;
		font-size: 0.8rem;
	}
	
	.group {
		margin-top: -20px;
	}
	
	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 3rem;
		list-style: none;
		text-align: center;
		line-height: 3rem;
		z-index: 99;
	}
	
	.footer .classOne {
		line-height: 2rem;
		background: white;
		color: darkgray;
		position: relative;
		width: 15%;
		height: 100%;
		box-sizing: border-box;
		float: left;
	
	}
	
	.footer .classTwo {
		width: 35%;
		height: 100%;
		box-sizing: border-box;
		float: left;
		color: white;
	}
	
	.footer li:nth-of-type(3) {
		background: orange;
	}
	
	.footer li:nth-of-type(4) {
		background: orangered;
	}
	
	.footer .iconfont {
		font-size: 1.3rem;
	}
	
	.footer h4 {
		width: 100%;
		font-weight: normal;
		font-size: 0.5rem;
		position: absolute;
		bottom: -0.2rem;
		left: 50%;
		transform: translate(-50%, 0);
	}
	
	.choose {
		font-size: 1rem;
	}
	
	.comments {
		width: 100%;
	}
	
	.commentsLeft {
		width: 20%;
		height: 3rem;
		float: left;
	}
	
	.commentsLeft img {
		width: 100%;
	}
	
	.commentsRight {
		width: 80%;
		height: 3rem;
		float: left;
	}
	
	.cell {
		background: white;
		height: 2.5rem;
		line-height: 2.5rem;
		padding: 0 15px;
		position: relative;
	}
	
	.icon {
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translate(0, -50%);
		opacity: 0.6;
	}
	
	.title {
		width: 100%;
		height: 2.5rem;
		text-align: center;
		background: #f0f0f0;
		line-height: 2.5rem;
	}
	
	.tab a {
		display: block;
		width: 100%;
		height: 100%;
	}
	
	.detail {
		width: 100%;
		list-style: none;
	}
	
	.detail li {
		width: 100%;
	}
	
	.detail li img {
		width: 100%;
		height: 100%;
	}
</style>